<template>
  <li class="talk_box">
    <div class="talkbox_left">
      <img :src="item.user.avatarUrl" alt />
    </div>
    <div class="talkbox_right">
      <p class="name">{{item.user.nickname}}</p>
      <p class="time">{{item.time|format_Time}}</p>
      <p class="text">{{item.content}}</p>
    </div>
    <div class="zan">
      <span class="num">{{item.likedCount}}</span>
      <i class="iconfont icon-zan" ></i>
      <!-- @click="clicknum" -->
    </div>
  </li>
</template>

<script>
export default {
  name: "talklist",
  props: ["item"],
  data() {
    return {
      clickstate: false,
    };
  },
  filters: {
    //时间格式化
    format_Time(val) {
      let date = new Date(val);
      let m = date.getMonth() + 1;
      let d = date.getDate();
      m = m > 9 ? m : "0" + m;
      d = d > 9 ? d : "0" + d;
      return `${m}月${d}日`;
    },
  },
  methods: {
    // clicknum() {

    //     // if(this.clickstate){

    //     // }
    // },
  },
};
</script>

<style lang="less" scoped>
.talk_box{
    // padding: 0px 10px;
}
li {
  margin-top: 2rem;
  width: 100%;
  // height: 10vh;
  position: relative;
  display: flex;
  .talkbox_left {
    float: left;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    // background-color: red;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-image: url(../assets/images/toux.png);
    }
  }
  .talkbox_right {
    border-bottom: 1px solid #f4f4f4;
    float: right;
    flex: 1;
    margin-left: 20px;
    .name {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.7);
    }
    .time {
      font-size: 10px;
      color: rgba(0, 0, 0, 0.3);
      // background-color: red;
      margin-bottom: 15px;
    }
    .text {
      width: 31rem;
      word-wrap: break-word;
    //   padding: 0px 0px 10px 0px;
      font-size: 15px;
    }
  }
  .zan {
    position: absolute;
    right: 10px;
    top: 10px;
    .num {
      margin-right: 5px;
      color: rgba(0, 0, 0, 0.5);
    }
    
  }
//   .active{
//       color: red;
//   }
}
</style>